<%@include file="include.jsp" %>
<html>
<head>
<title>Overview</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<title>Level 3 Detail</title>
<script type="text/javascript">
$(function () {
    // On document ready, call visualize on the datatable.
    $(document).ready(function() {
        Highcharts.visualize = function(tables, options) {	
        	// the data series
			options.series = [];
			// handle the series data
			for(var i=0; i< tables.length; i++){
				var title = tables[i].rows[0].cells[0].innerHTML;
				var series = { name: title, data: [] };
				for(var j = 1, row; row = tables[i].rows[j]; j++){
					var r = parseFloat(row.cells[0].innerHTML);
					var s = parseFloat(row.cells[1].innerHTML);
					var e = parseFloat(row.cells[2].innerHTML);
					var data = {};
					data.y = r;
					data.start = s;
					data.end = e;
					series.data.push(data);
				}
				options.series.push(series);
			}
			// draw the chart		
			$('#box1').highcharts(options);
		};
    
		var tables = new Array();
		for(var i=1;i<=4;i++){
			var id = '' +i + '';
			tables[i-1] = document.getElementById(id);   // for shared pool result
		}
        

        options = {
            chart: {
                type: 'spline'
            },
            title: {
                text: 'Performance'
            },
            xAxis: {
                min: 0,
                allowDecimals: false
            },
            yAxis: {
                title: {
                    text: 'Ratio %'
                },
                min: 0
            },
			tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        'From <b>' + Highcharts.dateFormat('%e. %b %H:%M %p',this.point.start) + '</b> to <b>' + Highcharts.dateFormat('%e. %b %H:%M %p',this.point.end) +'</b><br /><b>'+ 
                        this.y +'%</b>';
                },
                crosshairs: true
            }
        };
        Highcharts.setOptions({
        	global: {
        		useUTC: false       // use local time formate
        	}
        });
        Highcharts.visualize(tables, options);
    });
    
});
</script>   
</head>
<%@include file="header.jsp" %>
<body>
<div style="display:none">
<c:forEach items="${result.results}"  var="statResult" varStatus="status">
<table id="${status.count}">
    <tr><td><c:out value="${statResult.title}" /></td></tr>
	<c:forEach items="${statResult.points}" var="point">
		<tr>
			<td><c:out value="${point.ratio}" /></td>
			<td><c:out value="${point.start}" /></td>
			<td><c:out value="${point.end}" /></td>
		</tr>
	</c:forEach>
</table>
</c:forEach>
</div>
<div id="bg">
	<div id="outer">
		<div id="header">
			<div id="logo">
				<h1>
				Database Tuning
				</h1>
			</div>
	    	<%@include file="navigation.jsp" %>
	    </div>
		<div id="main">
			<div id="box1">
			</div>
		</div>
		<%@include file="footer.jsp" %>
	</div>
</div>
</body>
</html>